<template>
  <el-dialog :visible.sync="visible" title="分配" :close-on-click-modal="false" width="60vw" @opened="handleOpened" @closed="handleClosed">
    <table-box ref="tableBox" :data="tableData" :table-config="tableConfig" />
    <div class="btn-end">
      <c-button type="default" @click="handleCancel">取消</c-button>
      <c-button type="primary" @click="handleConfirm">确定</c-button>
    </div>
  </el-dialog>
</template>
<script>
import { distributedTask } from '@/api/channelTask2/storeUpgradeTask'
export default {
  name: 'Distribution',
  props: {
  },
  data() {
    return {
      visible: false,
      tableConfig: {
        interfacePath: '',
        hideFuncBar: true,
        setting: [
          {
            prop: 'marketName',
            label: '市场名称',
            minWidth: 100
          },
          {
            prop: 'agencyName',
            label: '所属办事处',
            minWidth: 100
          },
          {
            prop: 'customerCode',
            label: '客户编码',
            minWidth: 100
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: 100
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: 100
          },
          {
            prop: 'responsibleName',
            label: '分配负责人',
            minWidth: 200,
            editable: true,
            render: (h, row) => {
              // 1.若市场类型非空白市场，当前客户下对应的所有客户经理；
              // 2.若市场类型为空白市场（客户编码为空），
              // 则展示当前办事处下的所有客户经理
              const props = {
                value: row.responsibleCode,
                label: row.responsibleName,
                containSelf: true
              }
              // if (row.marketType !== 'A') {
              //   props.byCustomer = true
              //   props.queryCustomerCode = row.customerCode
              //   return h('c-common-search-person', {
              //     props,
              //     on: {
              //       input: v => this.$set(row, 'responsibleCode', v),
              //       'update:label': v => this.$set(row, 'responsibleName', v),
              //       'update:personTel_res': v => this.$set(row, 'responsiblePhone', v)
              //     }
              //   })
              // } else {
              props.queryOfficeCode = row.agencyCode
              return h('c-common-search-person-by-office', {
                props,
                on: {
                  input: v => this.$set(row, 'responsibleCode', v),
                  'update:label': v => this.$set(row, 'responsibleName', v),
                  'update:personTel_res': v => this.$set(row, 'responsiblePhone', v)
                }
              })
              // }
            }
          }
        ]
      },
      tableData: [],
      selectedRows: []
    }
  },
  methods: {
    openDialog(selectedRows) {
      this.selectedRows = selectedRows
      this.tableData = JSON.parse(JSON.stringify(selectedRows))
      this.visible = true
    },
    handleOpened() {
    },
    handleClosed() {
      this.selectedRows = []
      this.tableData = []
    },
    handleCancel() {
      this.visible = false
    },
    validate() {
      return new Promise((resolve, reject) => {
        for (let i = 0; i < this.tableData.length; i++) {
          const d = this.tableData[i]
          if (!d.responsibleCode) {
            this.$message.warning(`【${d.marketName}】未选择负责人!`)
            return reject()
          }
        }
        resolve()
      })
    },
    handleConfirm() {
      return this.validate().then(() => {
        const data = this.tableData.map(e => {
          return {
            marketId: e.id,
            responsibleCode: e.responsibleCode,
            responsibleName: e.responsibleName,
            responsiblePhone: e.responsiblePhone
          }
        })
        return distributedTask(data).then(res => {
          this.$message.success('操作成功!')
          this.visible = false
          this.$emit('on-success')
        })
      })
    }
  }
}
</script>
